<template>
  <div>
    <div class="clearfix content-top">
      <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="dialogShow()">添加顶级节点</el-button>
      <el-input placeholder="请输入节点名称进行过滤" v-model="sarch" class="pull-right el-input-middle" size="small"></el-input>
    </div>
    <!-- 树菜单 -->
    <div class="block" >
      <el-tree :data="dataList" node-key="id" :props="defaultProps" accordion :filter-node-method="filterNode" ref="menuTree">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label}}</span>
          <span class="optionBtn">
            <el-button circle icon="el-icon-plus" size="mini" type="success" @click="dialogShow(node,data,'insert')"></el-button>
            <el-button circle icon="el-icon-edit" size="mini" type="primary" @click="dialogShow(node, data,'update')"></el-button>
            <el-button circle icon="el-icon-delete" size="mini" type="warning" @click="remove(node, data)"></el-button>
          </span>
        </span>
      </el-tree>
    </div>
    <!-- 详情框 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.isShow" :close-on-click-modal="false" width="700px">
      <el-button v-if="dialog.title ==='编辑节点'" circle   size="mini" type="primary" @click="detailList">资源清单</el-button>
      <el-form label-position="right" label-width="100px" :model="menuData">
          <el-form-item label="父级ID">
              <el-input v-model="menuData.groupId" disabled></el-input>
          </el-form-item>
          <el-form-item label="名称">
              <el-input v-model="menuData.name"></el-input>
          </el-form-item>
          <el-form-item label="编号">
              <el-input v-model="menuData.code"></el-input>
          </el-form-item>
          <el-form-item label="直径">
              <el-input v-model="menuData.diameter" disabled></el-input>
          </el-form-item>
          <el-form-item label="深度">
              <el-input v-model="menuData.depth"></el-input>
          </el-form-item>
          <el-form-item label="刃长">
              <el-input v-model="menuData.blade"></el-input>
          </el-form-item>
          <el-form-item label="磨">
              <el-input v-model="menuData.mo"></el-input>
          </el-form-item>
          <el-form-item label="数量">
              <el-input v-model="menuData.count" disabled></el-input>
          </el-form-item>
          <el-form-item label="备注">
              <el-input v-model="menuData.remark"></el-input>
          </el-form-item>
      <!--
        name:'',
        code:'',
        diameter:'',
        depth:'',
        blade:'',
        mo:'',
        count:'',
        remark:'',
        groupId:0,
       -->
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitDialog">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 清单框 -->
    <el-dialog :title="dialog1.title" :visible.sync="dialog1.isShow" append-to-body :close-on-click-modal="false" width="700px">
        <el-table  :data="detailTableList"  tooltip-effect  highlight-current-row border stripe>
                        <el-table-column type="index" :index="0" label="序号" min-width="120" align="center"></el-table-column>
                        <el-table-column property="drawCode" label="图纸编号" min-width="120" align="center" sortable></el-table-column>
        </el-table>
    </el-dialog>
  </div>
</template>
<script>
import api from 'plugins/axios/api.js'
import planApi from 'plugins/axios/planApi.js'
export default {
  data(){
    return {
      detailTableList:[],
      sarch:'',
      dataList:[],
      defaultProps:{
        children: 'children',
        label: 'name',
        id: 'id',
      },
      dialog:{
        title:'',
        isShow:false,
        currentData:null,
      },
      dialog1:{
        title:'',
        isShow:false,
        currentData:null,
      },
      menuData:{}
    }
  },
  created() {
    this.getData();
  },
  computed:{
    tableHeight(){
      return this.$store.state.clientHeight-184;
    }
  },
  watch:{
    sarch(val){
      this.$refs.menuTree.filter(val);
    }
  },
  methods:{
    getData(){
      let self = this;
      planApi.productionGroupNodeAll().then(res=>{
        self.dataList = res.content.children;
      })
    },
    filterNode(value, data){
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    dialogShow(node,data,type){/**添加节点 */
      let self = this;
// /**
//      * 名称
//      */
//     private String name;
//     /**
//      * 编号
//      */
//     private String code;
//     /**
//      * 直径
//      */
//     private String diameter;
//     /**
//      * 深度
//      */
//     private String depth;
//     /**
//      * 刃长
//      */
//     private String blade;
//     /**
//      * 磨
//      */
//     private String mo;
//     /**
//      * 数量
//      */
//     private Integer count;
//     /**
//      * 备注
//      */
//     private String remark;
//     /**
//      * 单一资源库ID
//      */
//     private Integer groupId;
      self.menuData={
        // id: '',
        // parentId:0,
        // name: '',
        // count: 0,
        name:'',
        code:'',
        diameter:'',
        depth:'',
        blade:'',
        mo:'',
        count:'',
        remark:'',
        groupId:0,
      };
      if(type==='insert'){
        self.dialog.title ='新增节点';
        self.menuData.parentId=data.id;
      }else if (type==='update'){
         self.dialog.title ='编辑节点';
         self.dialog.currentData =  data;
         self.menuData = {
            id: data.id,
            name:data.name,
            parentId:data.parentId,
            count:data.count,
         }
      }else{
        self.dialog.title ='新增顶级节点';
      }
      self.dialog.isShow = true;
    },
    detailList(){
      let self = this;
      self.dialog1.isShow = true;
      alert(self.dialog.currentData.id);
    },
    remove(node,data){
      let self = this;
      self.$confirm('确认删除吗?', '提示', {
          confirmButtonClass: 'el-button--warning'
      }).then(() => {
          // planApi.deleteProductionGroup(data.id).then(res=>{
          //   self.getData();
          //   self.$message.success(res.desc)
          // })
          planApi.delProduction(data.id).then(res=>{
            self.getData();
            self.$message.success(res.desc)
          })
      }).catch(() => {
      });
    },
    submitDialog(){
      let self = this;
      let type =  self.dialog.title.indexOf('新增')>-1?'addProductionGroup':'editProductionGroup';
      // planApi.addUpdateProductionGroup(type,self.menuData).then(res=>{
      //   self.dialog.isShow= false;
      //   self.getData();
      //   self.$message.success(res.desc)
      // })
        planApi.insertProduction(self.menuData).then(res=>{
        self.dialog.isShow= false;
        self.getData();
        self.$message.success(res.desc)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.content-top
  margin-bottom 16px
.custom-tree-node
  flex 1
  display flex
  align-items center
  justify-content space-between
  font-size 14px
  padding-right 8px
  >span:first-child
    margin 0 40px 0 0
  >span:nth-child(2)
    display none
  &:hover>span:nth-child(2)
    display inline-block
</style>


